<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>07_浮动综合练习</title>
        <style>
            .center {
                width: 1000px;
                background-color: #e8e8e8;
                margin: 0 auto;
            }
            .f1,.f2 {
                overflow: hidden;
            }
            .f1>.left {
                width: 611px;
                height: 376px;
                background-color: gray;
                margin-bottom: 10px;
                float:left;
            }
            .f1>.right {
                width: 375px;
                height: 376px;
                background-color: yellow;
                margin-left: 10px;
                float:left;
            }
            .f2>.left {
                width: 366px;
                height: 233px;
                background-color: pink;
                margin-right: 20px;
                float: left;
            }
            .f2>.card {
                width: 198px;
                height: 233px;
                background-color: #0aa1ed;
                margin-right: 8px;
                float: left;
            }
            #card3 {
                margin-right: 0;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="center">
                <div class="f1">
                    <div class="left">gray</div>
                    <div class="right">yellow</div>
                </div>
                <div class="f2">
                    <div class="left">pink</div>
                    <div class="card">#aa1ed</div>
                    <div class="card"></div>
                    <div class="card" id="card3"></div>
                </div>
            </div>
        </div>

    </body>
</html>